<script setup>
import domtoimage from 'dom-to-image';
import html2canvas from 'html2canvas'

import HelloWorld from './components/HelloWorld.vue'
import VideoMediaPlayComp from './components/VideoMediaPlayComp.vue'
import VideoChatRTCComp from './components/VideoChatRTCComp.vue'

import { ref,onMounted,defineAsyncComponent } from "vue"

// const HelloWorld = ref(null)
// const handleClick = () =>{
//     import('./components/HelloWorld.vue').then(res => HelloWorld.value = res.default)
// }
const d = ref(null)
const imgUrl = ref(null)
const blob = ref(null)
let c = null
const canvasToImg = () => {
    html2canvas(document.documentElement,{
            height: document.documentElement.scrollHeight,
            backgroudColor: '#242424',

        }).then(function(canvas) {
            imgUrl.value = canvas.toDataURL('image/png')
            canvas.toBlob(blobs=>{
                blob.value = blobs
            })
            
            
            

            // canvas.toBlob(function(blob) {
            //     var url = URL.createObjectURL(blob);
            //     var a = document.createElement('a');
            //     a.href = url;
            //     a.download = 'image.png';
            //     a.click();
            // });
        }).catch(err => {
            console.log(err)
        })
}
onMounted(() => {
    // canvasToImg()
})

const handleClick = () => {
    const arr = [...Array(100)].map((_,i) => i);
    console.log(arr)
    arr.forEach(i => {
        const div = document.createElement('div')
        div.innerHTML = i
        d.value.appendChild(div)
    })
}

const handleDraw = () => {
    canvasToImg()
}

const handleDownload = () => {
        const url = URL.createObjectURL(blob.value) || blob.value;
        const a = document.createElement('a');
        a.href = url;
        a.download = 'image.png';
        a.click();
}

const domToImg = () => {
    domtoimage.toJpeg(d.value,{
        bgcolor: '#242424',
        quality: 1
    })
        .then(function (dataUrl) {
            blob.value = dataUrl
            const img = new Image();
            img.src = dataUrl;
            document.body.appendChild(img);
        })
        .catch(function (error) {
            console.error('oops, something went wrong!', error);
        });
}
</script>

<template>
    <div id="as" ref="d">
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <canvas ref="canvasDom"></canvas>
  <img :src="imgUrl" alt="" style="width: 500px;height: 500px;">
  <button @click="handleClick">点击渲染组件</button>
  <button @click="handleDraw">点击重新绘制</button>
  <button @click="handleDownload">点击保存图片</button>
  <button @click="domToImg">点击Dom转图片</button>
  <HelloWorld></HelloWorld>
  <!-- <component :is="HelloWorld"></component> -->

  <VideoMediaPlayComp></VideoMediaPlayComp>
  <br>
  <VideoChatRTCComp></VideoChatRTCComp>
</template>

<style>
@property --bg-color {
  value: #242424;
}
button{
    inset: 5px;
    margin: 5px;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
